<template>
  <div class="line-wrap">
    <div :id="'linechart'+i" class="line-chart" v-for="(v,i) in chartdata" :key="i"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import {EleResize} from './mixins/resize'
import { skyblue } from 'color-name';
import { Promise } from 'q';
export default {
  // mixins: [resize],
  props:{
    chartdata:{
      type:Array,
      default:[]
    }
  },
  mounted() {
    this.initChart()
  },
  watch: {
    chartdata(){
      this.$nextTick(()=>{
        this.initChart()
      })
    }
  },
  methods: {
    initChart(){
        this.chartdata.forEach((chartdataItem,i) => {
          chartdataItem.option=this.setOptions(chartdataItem) 
          chartdataItem.myChart = echarts.init(document.getElementById('linechart'+i));
          chartdataItem.myChart.setOption(chartdataItem.option);    
          this.resizeCharts(chartdataItem,i)      
        });
    },
    resizeCharts(v,i){
        let that=this    
        let resizeDiv=document.getElementById('linechart'+i)
        let listener=function(){
          v.myChart.resize()
        }
        EleResize.on(resizeDiv,listener)
    },
    setOptions(item){
            let option={
            color:['green','blue'],
            legend:{
              data:['销量','销量2'],
              textStyle:{
                color:'blue'
              }
            },
            grid:{
              top:'8%',
              left:30,
              right:20,
    
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            xAxis: {
                boundaryGap:false,
                axisLine:{
                  lineStyle:{
                    color:'skyblue'
                  }
                },
                axisTick:{
                  show:false
                },
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子','袜子']
            },
            yAxis: {
                axisLine:{
                  lineStyle:{
                    color:'skyblue'
                  }
                },
            },
            series: [{ name: '销量', type: 'line',smooth:true,
              areaStyle:{
                color:'#f3f8ff'
              },
             data: item.expectedData },
            { name: '销量2', type: 'line',smooth:true, data: item.actualData }]
        }
        return option
    }
  },
}
</script>
<style lang="less" scoped>
  .line-wrap {
    width:100%;
    height:350px;
    background: #fff;
    margin-top:20px;
    // padding:5px 20px;
    // box-sizing: border-box;
    display: flex;
    .line-chart {
      flex: 1 0 200px;
      width: 0;
      height: 100%;
    }
  }

</style>

